/**
 * 学习目标：使用Ref，获取input的value值
 * 步骤：
 * 1.使用React.createRef()来创建ref对象
 * 2.给input设置ref标签属性
 * 3.通过this.ref对象名字.current获取到input的DOM元素
 */
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  //  1.使用React.createRef()来创建ref对象
  textRef = React.createRef();

  handleChange = (e) => {
    // 3. 通过this.ref对象名字.current获取到input的DOM元素
    // 注意：
    // textRef是自定义的属性名字
    // .current是ref的固定属性
    console.log(this.textRef.current.value, 'input DOM元素');
  };

  render() {
    console.log(this.textRef, 'ref对象');
    return (
      <div>
        名字：
        {/* 2.给input设置ref标签属性 */}
        <input type="text" ref={this.textRef} onChange={this.handleChange} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
